<template>
  <div class="box app-container">
    <el-row class="line">
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="任务名">
            <el-input v-model="formInline.user" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="周期">
            <el-date-picker
              v-model="formInline.value"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" style="padding-bottom: 20px;">
        <el-card shadow="never">
          <el-table
            :data="tableData.slice((pages.pageNum-1)*pages.pageSize,pages.pageNum*pages.pageSize)"
            style="width: 100%; min-height: 480px"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" class="demo-table-expand" style="padding: 0 20px;">
                  <el-form-item label="日志类型">
                    <span>{{ props.row.type }}</span>
                  </el-form-item>
                  <el-form-item label="账号">
                    <span>{{ props.row.user }}</span>
                  </el-form-item>
                  <el-form-item label="执行结果">
                    <span>
                  <span class="vab-dot" :style="{background:props.row.result==='登录成功'?'#13ce66':'#ff4d4f'}">
                    <span :style="{background:props.row.result==='登录成功'?'#13ce66':'#ff4d4f'}"></span>
                  </span>{{ props.row.result }}
                </span>
                  </el-form-item>
                  <el-form-item label="登录IP">
                    <span>{{ props.row.ip }}</span>
                  </el-form-item>
                  <el-form-item label="访问时间">
                    <span>{{ props.row.date }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              label="日志类型"
              prop="type"
            >
            </el-table-column>
            <el-table-column
              label="账号"
              prop="user"
            >
            </el-table-column>
            <el-table-column
              label="执行结果"
            >
              <template slot-scope="scope">
                <span>
                  <span class="vab-dot" :style="{background:scope.row.result==='登录成功'?'#13ce66':'#ff4d4f'}">
                    <span :style="{background:scope.row.result==='登录成功'?'#13ce66':'#ff4d4f'}"></span>
                  </span>{{ scope.row.result }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="登录IP"
              prop="ip"
            >
            </el-table-column>
            <el-table-column
              label="访问时间"
              prop="date"
            >
            </el-table-column>
          </el-table>
          <Pagination :total="total" :pageNum.sync="pages.pageNum"
                      :limit.sync="pages.pageSize"
                      :pageSizes="pageSizes"
          ></Pagination>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import Pagination from '@/components/Pagination/Pagination'
export default {
  name: 'index',
  components:{Pagination},
  data() {
    return {
      formInline: {
        user: '',
        value: ''
      },
      tableData: [],
      loading: false,
      dataList: [],
      total: 0,
      pages: {
        pageNum: 1,
        pageSize: 10
      },
      pageSizes: [10, 20, 30, 40, 50, 100]
    }
  },
  methods: {
    fetchData() {
      //请求接口加载表格数据
      this.loading = true
      axios.get('http://route.showapi.com/110-27').then(res => {
        this.tableData = res.data._data.data.rows
        this.dataList = res.data._data.data.rows
        this.total = res.data._data.data.total
        this.loading = false
      }).catch(err => {
        this.loading = false
      })

    },
    onSubmit(){
      let list = []
      this.tableData = this.dataList
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].user.indexOf(this.formInline.user) >= 0) {
          list.push(this.tableData[i])
        }
      }
      this.tableData = list
      this.total = this.tableData.length
    },
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped lang="scss">
.box {
  margin-bottom: 50px;

  ::v-deep.cell {
    font-size: 14px;
    font-weight: 400;
  }

  .line {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 20px 20px 0 20px;
    margin-bottom: 20px;
    border: 1px solid #ebeef5;

    .el-form-item {
      margin-right: 20px;

      ::v-deep.el-date-editor {
        width: 235px;
      }

      .el-input {
        width: 220px;
      }
    }

    ::v-deep.el-form-item__label {
      font-weight: 400;
    }
  }

  .vab-dot {
    display: inline-block;
    position: relative;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 50%;

    span {
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      animation: vabDot 1.2s ease-in-out infinite;
    }
  }

  @keyframes vabDot {
    0% {
      transform: scale(0.5);
      opacity: 1;
    }
    25% {
      transform: scale(1);
      opacity: 0.75;
    }
    50% {
      transform: scale(1.5);
      opacity: 0.5;
    }
    75% {
      transform: scale(2);
      opacity: 0.25;
    }
    100% {
      transform: scale(2.5);
      opacity: 0;
    }
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
</style>
